export interface MyWaterfallProps<T> {
  keyField?: string // 每一项的唯一标识的key, 默认id
  list?: T[]
  waterFallParams?: MyWaterfallParams
  leftTopParams?: LeftTopParams
  scrollContainerId?: string | HTMLElement | null | undefined // 滚动容器的id或元素
  showDominantColor?: boolean
}

export interface LeftTopParams {
  widthHeightRatio?: number // 左上角站位的宽度和高度的比例
  columnNum: number // 左上角站位的需要占据的列数
}

export type ViewCard = Record<string, any>

export interface MyWaterfallParams {
  breakpoints: MyBreakpoints
  width: number
  hasAroundGutter: boolean
  gutter: number
  // list: ViewCard[]
  align: string
  defaultItemHeight: number
  buffer: number
}

interface MyPoint {
  rowPerView: number
}

export type MyBreakpoints = Record<number, MyPoint>

export interface MyItemWidthProps {
  breakpoints: MyBreakpoints
  wrapperWidth: number
  gutter: number
  hasAroundGutter: boolean
  initWidth: number
}

export interface MyItemWidthByBreakpointProps extends MyItemWidthProps {
  size: number
}

export type Nullable<T> = T | null

export type CssStyleObject = Partial<CSSStyleDeclaration> & Record<string, string | null>

export interface ColumnsData<T> {
  columnId: number
  items: T[]
  totalHeight: number
}
